<template>
    <div id="teamCardList">
        <van-card
                v-for="team in teamList"
                :thumb="chaowei"
                :tag="team.id"
                :desc="team.description"
                :title="team.name"

        >
            <template #tags>
                <van-tag plain type="danger" style="margin-right:10px ">
                    {{teamStatusEnum[team.status]}}
                </van-tag>
            </template>

            <template #bottom>
                <div>
                    {{`队伍人数： ${team.joinNum}/${team.maxNum}` }}
                </div>

                <div>
                    {{"创建时间：" + team.createTime}}
                </div>

                <div>
                    {{"过期时间：" + team.expireTime}}
                </div>

            </template>

            <template #footer>
                <!--加入队伍按钮：当前登录的用户不是队伍的创建人并且没有加入队伍才展示-->
                <van-button v-if="currentUser?.id !== team.userId && !team.hasJoin" plain type="primary" size="small"
                            @click="preJoinTeam(team)">加入队伍</van-button>
                <van-button v-if="team.userId === currentUser?.id" plain type="primary" size="small"
                            @click="doUpdateTeam(team.id)">更新队伍</van-button>
                <!--退出队伍按钮：当前登录的用户不是队伍的创建人并且已加入队伍才展示-->
                <van-button v-if="currentUser?.id !== team.userId && team.hasJoin" plain type="warning" size="small"
                            @click="doQuitTeam(team.id)" >退出队伍</van-button>
                <van-button v-if="team.userId === currentUser?.id" plain type="danger"  size="small"
                            @click="doDeleteTeam(team.id)">解散队伍</van-button>
            </template>

        </van-card>
        <van-dialog v-model:show="showPasswordDialog" title="请输入密码" show-cancel-button @confirm="doJoinTeam" @cancel="doCancleTeam">
            <van-field v-model="password"  placeholder="请输入密码" />
        </van-dialog>

        <van-empty description="搜索结果为空" v-if="!teamList || teamList.length < 1"/>
    </div>

</template>

<script setup lang="ts">
    //子组件如何接收父组件传过来的参数?
    //使用defineProps
    import {defineProps,ref} from 'vue'
    import {onMounted} from 'vue'
    import {teamStatusEnum} from '../constants/teamEnum'
    import {Team} from "../models/team";
    import myAxois from "../plugin/MyAxios";
    import {showFailToast, showSuccessToast} from "vant";
    import {useRouter} from 'vue-router';
    import chaowei from '../assets/chaowei.png'
    import {getCurrentUser} from "../service/user";

    const router = useRouter();

    const joinTeamId = ref(0);
    const showPasswordDialog = ref(false);
    const password = ref('');

    //-----------------接收父组件传来的参数-------------------------------
    interface teamCardListProps {
        teamList:Team[];
    }
    const pros = defineProps<teamCardListProps>();
    //----------------------------------------------------------------

    //---------------------加入队伍------------------------

    const preJoinTeam = (team:Team) =>{
        joinTeamId.value = team.id
        if(team.status === 0){
            doJoinTeam()
        }else{
            showPasswordDialog.value = true
        }
    }

    const doJoinTeam = async () =>{
        if(!joinTeamId.value){
            return
        }
        const res = await myAxois.post("/team/join",{
            teamId:joinTeamId.value,
            password:password.value
        })
        if(res.data.code === 0){
            showFailToast("加入成功");
            window.location.reload();
        }else{
            showFailToast("加入失败")
        }
    }

    //这个是dialog的取消方法
    const doCancleTeam = () =>{
        password.value = '';
        joinTeamId.value = 0;
    }
    //-------------------------------------------------------

    //--------------因为更新队伍按钮只有用户的创建人才能看到，所以这里先获取当前的登录用户信息----
    const currentUser = ref();
    onMounted(async () =>{
        const res = await getCurrentUser();
        if(res.data.code === 0){
            currentUser.value = res.data.data;
        }
        else{
            showFailToast("获取用户信息失败")
        }
    })

    //点击更新队伍按钮进行跳转与传递队伍id
    const doUpdateTeam = (id:number) =>{
        router.push({
            path:"/team/update",
            query:{
                id,
            }
        })
    }

    //退出队伍功能
    const doQuitTeam = async (id:number) =>{
        const res = await myAxois.post("/team/quit",{
            teamId:id
        });
        if(res.data.code === 0){
            showSuccessToast("退出成功")
            window.location.reload()
        }else{
            showFailToast("退出失败")
        }
    }

    //解散队伍功能
    const doDeleteTeam = async (id:number) =>{
        const res = await myAxois.post("/team/delete",{
            teamId:id
        });
        if(res.data.code === 0){
            showSuccessToast("解散成功")
        }else{
            showFailToast("解散失败")
        }
    }



</script>

<style scoped>
#teamCardList :deep(.van-image__img){
    height:128px;
    object-fit: unset;
}
</style>